<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog width="600px" :visible.sync="show" :destroy-on-close="true" :close-on-click-modal="false"
        :close-on-press-escape="false" v-loading="loading" :title="pageTitle">
        <div class="outer">
            <div id="charts" style="height: 400px" :auto-resize="true"></div>
        </div>
    </el-dialog>
</template>

<script>
import * as echarts from "echarts";

export default {
    data () {
        return {
            pageTitle: "",
            x: [],
            y: [],
            tour: null,
            show: false,
            loading: false,
        };
    },
    props: {},
    components: {
    },

    mounted: function () { },

    computed: {
        option: function () {
            return {
                toolbox: {
                    feature: {
                        saveAsImage: { type: "png", name: this.pageTitle },
                    },
                },
                xAxis: {
                    type: "category",
                    data: this.x,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        data: this.y,
                        type: "bar",
                    },
                ],
            };
        },
    },

    methods: {
        open (tour) {
            // 用于加载组件的数据
            this.pageTitle = tour.title + "数据统计分析";
            this.show = true;
            this.x = tour.data_series.x;
            this.y = tour.data_series.y;
            setTimeout(this.initEcharts, 500)
        },

        initEcharts: function () {
            var dom = document.getElementById('charts')
            console.log('dom is', dom)
            const ec = echarts.init(dom)
            ec.setOption(this.option)
            window.addEventListener("resize", () => {
                ec.resize();
            })
        },

        close () {
            this.show = false;
            this.x = [];
            this.y = [];
            this.tour = null;
        },
    },
};
</script>

<style scoped>
.outer {
    width: 100%;
}
</style>